<template>
  <div class="Watch">
    <div>{{ info.name }}----{{ info.age }}</div>
    <button @click="changeName">修改名字</button>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { ref, reactive, watch } from 'vue'
export default {
  setup () {
    const info = reactive({
      name: 'why',
      age: 30
    })
    const name = ref('wehy')
    // 传入可相应的对象， reactive/ref
    // watch(info, (newValue, oldValue) => {
    //   console.log('newValue', newValue, 'oldValue', oldValue)
    // })
    // 监听watch时，传入getters函数
    // watch(() => info.name, (newValue, oldValue) => {
    //   console.log('newValue', newValue, 'oldValue', oldValue)
    // })
    // 传入普通对象
    // watch(() => {
    //   return { ...info }
    // }, (newValue, oldValue) => {
    //   console.log('newValue', newValue, 'oldValue', oldValue)
    // })
    // 监听多个数据的变化
    watch([() => ({ ...info }), name], ([newInfo, newName], [oldInfo, oldName]) => {
      console.log(newInfo, newName, oldInfo, oldName)
    }, {
      deep: true, // 深度监听
      immediate: true // 立即执行
    })
    const changeName = () => {
      info.name = 'bob'
    }
    return {
      info,
      name,
      changeName
    }
  }
}
</script>
<style scoped>
</style>
